<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>E3</title>

		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/own.css" />

		<style type="text/css">
			.mui-table-view .mui-media-object {
				line-height: 75px;
				max-width: 75px;
				height: 75px;
			}
			
			.itemName {
				color: black;
				font-size: 0.9em;
			}
			
			.price {
				margin-top: 10px;
				font-size: 1em;
			}
			
			.curprice {
				color: #41CEA9;
			}
			
			.preprice {
				color: black;
				text-decoration: line-through
			}
		</style>
	</head>

	<body>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="need-login" style="text-align: center; margin-top: 50px; display: none;">
					<span style="color: gray; font-size: 0.9em;">你还没有登录</span>
					<br />
					<button type="button" class="mui-btn own-btn-green" style="margin-top: 10px; padding: 5px 20px;">请登录</button>
				</div>

				<ul id="wishList" class="mui-table-view">

				</ul>
			</div>

		</div>

		<script src="../js/mui.min.js" charset="UTF-8"></script>
		<script src="../js/own.js" charset="UTF-8"></script>
		<script src="../js/ajax.js" charset="UTF-8"></script>
		<script src="../js/arttmpl.js" charset="UTF-8"></script>
		<script type="text/javascript" charset="UTF-8">
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						contentdown: '下拉可刷新',
						contentover: '释放立即刷新',
						contentrefresh: '正在加载..',
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载..',
						contentnomore: '没有更多数据了',
						callback: pullupRefresh
					}
				}
			});
			var wishListwebview; //心愿单当前页面
			var needlogin; //需要登录div
			var wishListData = [];
			var wishListList; //
			var isloaded = false; //是否正在请求数据
			var li; //将要删除的li删除后设置为null
			mui.plusReady(function() {
				wishListwebview = plus.webview.currentWebview();
				needlogin = document.querySelector('.need-login');
				wishListList = document.getElementById('wishList');
				//为登录按钮添加事件
				document.querySelector('.need-login button').addEventListener('tap', function() {
					pushWebView({
						webType: 'newWebview_First',
						id: 'mine/login.html',
						href: 'mine/login.html',
						aniShow: getaniShow(),
						title: "登录",
						isBars: false,
						barsIcon: '',
						extendOptions: {}
					})
				}, false);
				//添加show事件设置是否需要加载或则更新心愿单
				wishListwebview.addEventListener('show', function() {
					if (localStorage.getItem('user')) {
						getlikelist('1');
					} else {
						needlogin.style.display = 'block';
						wishListList.style.display = 'none';
						wishListList.innerHTML = '';
						wishListData = [];
					}
				}, false);
				//特殊：接收自定义事件登录成功
				window.addEventListener('loginSuccess', function() {
					//隐藏登录div
					needlogin.style.display = 'none';
					wishListList.style.display = 'block';
					//去加载获取心愿单列表
					if (wishListData.length > 0 || isloaded) {
						return;
					}
					getlikelist('1');
				}, false);
				mui('#wishList').on('tap', '.mui-btn-danger', function() {
					var div = this.parentNode;
					li = div.parentNode; //设置li
					var idA = li.children[1].children[0];
					var id = idA.getAttribute('href');
					//查询数组删除其中的一项。
					mui.confirm('确认删除？', '心愿单', ['确认', '取消'], function(e) {
						if (e.index == 0) {
							deleteItemSuccess({
								code: '000000',
								id: id
							});
						}
					});
				});
				//添加每个item点击的监听事件
				mui('#wishList').on('tap', 'a', function() {
					var item = this;
					var itemID = this.getAttribute('href');
					//弹入分类商品列表
					pushWebView({
						webType: "newWebview_First",
						id: 'Home/product-detail-needtem.html',
						href: 'Home/product-detail-needtem.html',
						aniShow: getaniShow(),
						title: '商品详情',
						isBars: false,
						barsIcon: '',
						product_id: {
							itemID: itemID
						},
					});
				});
				//接收登出通知
				window.addEventListener('logout', function() {
					//显示登录div
					needlogin.style.display = 'block';
					wishListList.style.display = 'none';
					wishListList.innerHTML = '';
					wishListData = [];
				}, false);
			});
			//接收item成功的信息
			function deleteItemSuccess(data) {
				if (data.code == '000000') {
					console.log(data.id);
					if (deleteItemByID(data.id)) {
						if (li) {
							li.parentNode.removeChild(li);
							li = null;
						}
					}
				}
			}
			//通过id删除数组中的一条
			function deleteItemByID(id) {
				var index = -1;
				for (var i = 0; i < wishListData.length; i++) {
					if (wishListData[i].product_id == id) {
						index = i;
						break;
					}
				}
				if (index >= 0) {
					wishListData.splice(index, 1);
					return true;
				} else {
					return false;
				}
			}
			function getlikelist(page) {
				for (var i = 0; i < 20; i++) {
					var item = {};
					item.product_id = i;
					item.large_image_url = '../img/50.jpg';
					item.product_name = "谁叫你加入心愿单的，找死啊";
					item.default_price = "28.0";
					item.list_price = '30.0';
					wishListData.push(item);
					var listItem = document.createElement('li');
					listItem.className = 'mui-table-view-cell mui-media';
					listItem.innerHTML = '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-danger">删除</a></div><div class="mui-slider-handle"><a href="' + item.product_id + '"><img  src="' + item.large_image_url + '" class="mui-media-object mui-pull-left"/> <div class="mui-media-body"><p class="itemName mui-ellipsis-2">' + item.product_name + '</p><p class="price"><span class="curprice">¥' + item.default_price + '</span>&nbsp;&nbsp;<span class="preprice">¥' + item.list_price + '</span></p></div></a></div>';
					wishListList.appendChild(listItem);
				}
				isloaded = false;
			}

			function pulldownRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				}, 1000);
			}
			function pullupRefresh() {
				var copythis = this;
				setTimeout(function() {
					copythis.endPullupToRefresh(true | false);
				});
			}
			mui.back = function() {
				var index = plus.webview.currentWebview().opener();
				mui.fire(index, 'backall')
			}
		</script>

	</body>

</html>